<template>
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <div class="christmas">
     <!-- <div class="pic">
        <img src="../../assets/christmas/wash.png" alt="">
      </div>-->
      <div class="banner">
        <img src="../../assets/christmas/banner.png" alt="">
      </div>
      <div class="lineBox" style="position:relative;top: -14vw;z-index: 11">
        <img src="../../assets/christmas/line.png" alt="">
      </div>
      <div class="prizess">
        <router-link to="turntable">
          <img src="../../assets/christmas/christmaxPrize.png" alt="">
        </router-link>
      </div>
      <div class="lineBox">
        <img src="../../assets/christmas/line.png" alt="">
      </div>
      <div v-for="(v,i) in dataList"  :key="i">
        <div v-if="i == 0" style="position:relative;z-index: 8" class="female">
          <div class="inside">
            <div class="logo">
              <img :src="v.image" alt="">
            </div>
            <ul class="goodsList"  v-for="(v1,i1) in v.info" :key="i1" >
              <img src="../../assets/christmas/box.png" alt="">
              <li  class="goodsArea" @click="routerTo(v,v1)">
                <div class="imgBox" >
                  <img :src="v1.goods_image" alt="">
                </div>
                <div class="left">
                  <p class="goodsName">{{v1.goods_name}}</p>
                  <p style="font-size: 12px;color: #fff;margin-top: 3vw">双旦狂欢价</p>
                  <p class="prize">￥<b>{{v1.activity_price}}</b></p>
                  <div class="btn">
                    <img src="../../assets/christmas/greenbtn.png" alt="">
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>

        <div v-if="i == 1" class="female" style="margin-top: 8vw;">

          <div class="inside">
            <div class="lineBox" style="position:absolute;left: 4vw;top: -20vw;z-index: 2;">
              <img src="../../assets/christmas/line.png" alt="">
            </div>
            <div class="logo">
              <img :src="v.image"  alt="">
            </div>
            <ul class="goodsList"  v-for="(v1,i2) in v.info" :key="i2">
              <img src="../../assets/christmas/box.png" alt="">
              <li class="goodsArea" @click="routerTo(v,v1)">
                <div class="imgBox" >
                  <img :src="v1.goods_image" alt="">
                </div>
                <div class="left">
                  <p class="goodsName">{{v1.goods_name}}</p>
                  <p style="font-size: 12px;color: #fff;margin-top: 3vw">双旦狂欢价</p>
                  <p class="prize">￥<b>{{v1.activity_price}}</b></p>
                  <div class="btn">
                    <img src="../../assets/christmas/greenbtn.png" alt="">
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div v-if="i == 2" class="twoEgg">
          <div class="doubleEgg">
            <img :src="v.image"  alt="">
          </div>
          <ul class="goodsList"  v-for="(v1,i3) in v.info" :key="i3" >
            <li class="goodsArea" @click="routerTo(v,v1)">
              <div class="imgBox" >
                <img :src="v1.goods_image" alt="">
              </div>
              <div class="left">
                <p class="goodsName">{{v1.goods_name}}</p>
                <p style="font-size: 12px;color: #d52e2e;margin-top: 3vw">双旦狂欢价</p>
                <p class="prize">￥<b>{{v1.activity_price}}</b> <span class="oldprice">￥{{v1.price}}</span></p>
                <div class="btn">
                  <img src="../../assets/christmas/redbtn.png" alt="">
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

  </van-pull-refresh>
</template>

<script>
  import request from '../../request/index'
    export default {
        name: "christmas",
      data(){
          return{
            dataList:[],
            type:1,
            join_id:0,
            limit_id:0,
            group_id:0,
            platform:this.$route.query.version,
            types:6,
            isLoading: false
          }
      },
      methods:{
        onRefresh() {
          setTimeout(() => {
            this.$toast('刷新成功');
            this.isLoading = false;
          }, 500);
        },
        routerTo(v,v1){
          if (this._globe.isAndroid) {
            if (window.android != null && typeof window.android != "undefined") {
              window.android.openGoods(this.types,v1.goods_id,this.join_id,this.limit_id,this.group_id,v.id);
            }else {
              this.$router.push({
                path:'detail',
                query:{type:this.types,goods_id:v1.goods_id,join_id:this.join_id,limit_id:this.limit_id,
                  group_id:this.group_id,activity_id:v.id}
              })
            }
          }
          if (this._globe.isIos) {
            if (window.webkit) {
              window.webkit.messageHandlers.openGoods.postMessage
              ({type:this.types,goods_id:v1.goods_id,join_id:this.join_id,limit_id:this.limit_id,
                group_id:this.group_id,activity_id:v.id});//
              /*window.webkit.messageHandlers.openGoods.postMessage
              ({type:this.types,goods_id:v1.goods_id,join_id:this.join_id,limit_id:this.limit_id,
                group_id:this.group_id,activity_id:v.id});*/
            }else {
              this.$router.push({
                path:'/detail?type='+this.types+'&goods_id='+v1.goods_id+'&join_id='+this.join_id+'&limit_id='+this.limit_id+
                  '&group_id='+this.group_id+'&activity_id='+v.id
                // query:{type:this.type,goods_id:g.goods_id,join_id:this.join_id,limit_id:this.limit_id,group_id:g.group_id}
              })
            }
          }
        }
      },
      mounted(){
          document.title="双旦专场"
      },
      created() {
        request.doubleTwelve(this);
      }
    }
</script>

<style scoped lang="scss">
  @keyframes myAnimation {

    30%{
      transform: translate(0,120vw);
    }
    55%{
      transform: translate(0,120vw) rotate(-3deg);
      transform-origin:1% 2%;
    }
    75%{
      transform: translate(0,120vw) rotate(2deg);
      transform-origin:-1% -2%;
    }
    80%{
      transform: translate(0,120vw) rotate(-1deg);
      transform-origin:.5% 1%;
    }
    90%{
      transform: translate(0,120vw) rotate(1deg);
      transform-origin:.5% -1%;
    }
    95%{
      transform: translate(0,120vw) rotate(-.5deg);
      transform-origin:.5% -1%;
    }
    98%{
      transform: translate(0,120vw) rotate(.3deg);
      transform-origin:.5% -1%;
    }
    99%{
      transform: translate(0,120vw) rotate(-.1deg);
      transform-origin:.5% -1%;
    }
    100%{
      transform: translate(0,120vw);
    }
  }
.christmas{
  background: #d52e2e;
  padding-bottom: 4vw;
  position: relative;
  .pic{
    position: absolute;
    z-index: 15;
    width:70vw;
    left: 15%;
    top: -132vw;

  }
  .prizess{
    width: 92vw;
    height: auto;
    margin: 0px auto;
    margin-top: -20vw;
    position: relative;
    z-index: 10;
  }
  .banner{
    width: 100vw;
    position: relative;
    z-index: 12;
  }
  .lineBox{
    width: 80vw;
    height: auto;
    margin: 0px auto;
    position: relative;
    top: -10vw;
    z-index: 9;
  }
  .doubleEgg{
    width: 32vw;
    height: auto;
    margin: 0px auto;
  }
  .female{
    width: 92vw;
    height: auto;
    margin: 0px auto;/*
    border: 2vw solid;
    border-image: url("../../assets/christmas/border1.png") 21 round;*/
    background: url("../../assets/twelve/bottom.png");
    position: relative;
    z-index: 6;
    top: -18vw;
    background-size: 100% 100%;
    border-radius: 3vw;
    padding: 2vw 0;
      .inside{
        width: 96%;
        height: 98%;
        padding-top: 3vw;
        margin: 0 auto;
        border-radius: 3vw;
        box-shadow: 0px 0px 5px 0px #999999 inset;
        padding-bottom: 2vw;
        background: #fff;
          .goodsList{
            width: 82vw;
            height: 37.46vw;
            margin: 0 auto;
            margin-top: 2vw;
            position: relative;
            .goodsArea{
              width: 82vw;
              height: 28.46vw;
              position: absolute;
              top: 5.3vw;
              padding-left: 5.5vw;
              .left{
                width: 48vw;
                float: right;
                .btn{
                  width: 16vw;
                  float: right;
                  margin-right: 5vw;
                  position: relative;
                  top: -7vw;
                }
                .prize{
                  font-size: 12px;
                  color: #fff;
                  .oldPrice{
                    text-decoration: line-through;
                  }
                    b{
                      font-size: 16px;
                    }
                }
               .goodsName{
                 font-size: 12px;
                 color: #fff;
                 display: -webkit-box;
                 -webkit-box-orient: vertical;
                 -webkit-line-clamp:2;
                 overflow: hidden;
                 height: 10vw;
                 line-height: 5vw;
                 width: 44vw;
               }
              }
                .imgBox{
                  float: left;
                  width: 25vw;
                  height: 25vw;
                  border-radius: 2vw;
                  overflow: hidden;
                  img{
                    height: 100%;
                  }
                }
            }
          }
      }
      .logo{
        width: 25vw;
        height: auto;
        margin: 0 auto;
      }
   /* box-shadow*/
  }
  .twoEgg{
    width: 92vw;
    height: auto;
    margin: 0px auto;
    position: relative;
    z-index: 6;
    margin-top: -12vw;
    .goodsList{
      width: 92vw;
      height: auto;
      margin: 0 auto;
      li{
        width: 100%;
        height: 32vw;
        border-radius: 3vw;
        background: #fff;
        margin-top: 3vw;
        padding: 3.5vw 2vw;
        padding-left: 4vw;
        .left{
          width: 58vw;
          float: right;
          height: 27vw;
          .btn{
            width: 16vw;
            float: right;
            margin-right: 1.5vw;
            position: relative;
            top: -7vw;
          }
          .prize{
            font-size: 12px;
            color: #d52e2e;
            .oldprice{
              text-decoration: line-through;
              color: #666;
            }
            b{
              font-size: 16px;
            }
          }
          .goodsName{
            font-size: 12px;
            color: #333;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp:2;
            overflow: hidden;
            height: 10vw;
            line-height: 5vw;
            width: 44vw;
          }
        }
        .imgBox{
          float: left;
          width: 25vw;
          height: 25vw;
          border-radius: 2vw;
          overflow: hidden;
          img{
            height: 100%;
          }
        }
      }
    }
  }
}

</style>
